<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<jsp:include page="/WEB-INF/pages/admin/public/meta.jsp"></jsp:include>
<title>订单列表</title>
</head>
<body>
<nav class="breadcrumb"><i class="Hui-iconfont">&#xe67f;</i> 首页 <span class="c-gray en">&gt;</span> 订单管理 <span class="c-gray en">&gt;</span> <c:if test="${type eq '1' }">未付款订单</c:if><c:if test="${type eq '2' }">已付款订单</c:if><c:if test="${type eq '3' }">已完成订单</c:if> <a class="btn btn-success radius r" style="line-height:1.6em;margin-top:3px" href="javascript:location.replace(location.href);" title="刷新" ><i class="Hui-iconfont">&#xe68f;</i></a></nav>
<div class="page-container">
	<div class="text-c"> 日期范围：
		<input type="text" onfocus="WdatePicker({ maxDate:'#F{$dp.$D(\'logmax\')||\'%y-%M-%d\'}' })" id="logmin" class="input-text Wdate" style="width:120px;">
		-
		<input type="text" onfocus="WdatePicker({ minDate:'#F{$dp.$D(\'logmin\')}',maxDate:'%y-%M-%d' })" id="logmax" class="input-text Wdate" style="width:120px;">
		<input type="text" name="" id="searchOrderNo" placeholder=" 订单编号" style="width:250px" class="input-text">
		<button class="btn btn-success" type="submit" onclick="order_search()"><i class="Hui-iconfont" onclick="order_search()">&#xe665;</i> 搜订单</button>
	</div>
	<div class="cl pd-5 bg-1 bk-gray mt-20"> <span class="l"><c:if test="${type eq '1' }"><a href="javascript:;" onclick="closeOrders()" class="btn btn-danger radius"><i class="Hui-iconfont">&#xe6e2;</i> 批量关闭</a></c:if> </span> <span class="r">共有数据：<strong>${count }</strong> 条</span> </div>
	<div class="mt-20">
		<form id="form-order-list" >
			<table class="table table-border table-bordered table-bg table-hover table-sort">
	 			<thead>
					<tr class="text-c">
						<th width="20"><input type="checkbox"></th>
						<th width="80">订单编号</th>
						<th width="100">用户名称</th>
						<th width="100">服务商名称</th>
						<th width="80">商品名称</th>
						<th width="150">商品描述</th>
						<th width="50">价格</th>
						<th width="110">创建时间</th>
						<th width="60">商品状态</th>
						<th width="50">操作</th>
					</tr>
	 			</thead>
	 			<tbody>
					<c:forEach var="serviceOrder" items="${listOrder }" >
		 				<tr class="text-c" id="orderdata${serviceOrder.id }">
							<td width="20"><input name="orderCheckBox" type="checkbox" value="${serviceOrder.id }"></td>
							<td width="80">${serviceOrder.serviceNo }</td>
							<td width="100">${serviceOrder.memberName }</td>
							<td width="100">${serviceOrder.providerName }</td>
							<td width="80">${serviceOrder.serviceName }</td>
							<td width="150">${serviceOrder.serviceInfo }</td>
							<td width="50">${serviceOrder.totalPrice }</td>
							<td width="110"><fmt:formatDate value="${serviceOrder.createTime }" pattern="yyyy/MM/dd HH:mm:ss"/></td>
							<td class="td-status">
								<c:if test="${type eq '1' }">
									<span class="label label-danger radius">未付款</span>
								</c:if>
								<c:if test="${type eq '2' }">
									<span class="label label-success radius">已付款</span>
								</c:if>
								<c:if test="${type eq '3' }">
									<span class="label label-success radius">已完成</span>
								</c:if>
							</td>
							<td class="td-manage">
								<c:if test="${type eq '1' }">
									<a style="text-decoration:none" onClick="order_stop(orderdata${serviceOrder.id },'${serviceOrder.id}')" href="javascript:;" title="关闭交易"><i class="Hui-iconfont">&#xe6de;</i></a>
								</c:if>
								<a style="text-decoration:none" class="ml-5" onClick="order_detail('订单详情','orderDetail.action','${serviceOrder.id}')" href="javascript:;" title="详情"><i class="Hui-iconfont">&#xe627;</i></a>
							</td>
		 				</tr>
					</c:forEach>
	 			</tbody>
			</table>
		</form>
	</div>
</div>

<!--_footer 作为公共模版分离出去-->
<jsp:include page="/WEB-INF/pages/admin/public/footer.jsp"></jsp:include>
<!--/_footer 作为公共模版分离出去-->

<!--请在下方写此页面业务相关的脚本-->
<script type="text/javascript" src="admin/lib/My97DatePicker/4.8/WdatePicker.js"></script> 
<script type="text/javascript" src="admin/lib/datatables/1.10.0/jquery.dataTables.min.js"></script> 
<script type="text/javascript" src="admin/lib/laypage/1.2/laypage.js"></script>
<script type="text/javascript">
$('.table-sort').dataTable({
	"aaSorting": [[ 1, "desc" ]],//默认第几个排序
	"bStateSave": true,//状态保存
	"aoColumnDefs": [
	//{"bVisible": false, "aTargets": [ 3 ]} //控制列的隐藏显示
	{"orderable":false,"aTargets":[0,8]}// 制定列不参与排序
	]
});

function order_stop(obj,id){
	layer.confirm('确认关闭交易码？',function(index){
		$.ajax({
		    url: "orderUpdateOfStatus.action",
		    type: "POST",
		    data: {
		          "id" : id,
		          "status" : 4
		    },
		    success: function(data){
				/* $(obj).parents("tr").find(".td-status").html('<span class="label label-defaunt radius">已关闭</span>');
				$(obj).remove(); */
				layer.msg('已关闭交易!',{icon: 1,time:2000});
				window.location.reload();
		    },
		    error: function(data){
		        layer.msg('关闭失败!',{icon: 5,time:2000});
		    }
		});
	});
}
 
function order_detail(title,url,id){
	var index = layer.open({
		type: 2,
		title: title,
		content: url+"?id="+id
	});
	layer.full(index);
}

function closeOrders(){
	layer.confirm('确认要关闭吗？',function(index){
		$("#form-order-list").ajaxSubmit({
			type: "POST",
			url: "closeOrders.action",
		    success: function(){
		    	layer.msg('已关闭交易!',{icon: 1,time:2000});
				window.location.reload();
		    },
		    error: function(){
		        layer.msg('提交失败！',{icon: 5,time:2000});
		    }
		});
	});
}

function order_search(){
	var orderNo = document.getElementById('searchOrderNo').value;
	var datemin = document.getElementById('logmin').value;
	var datemax = document.getElementById('logmax').value;
	window.location.href='orderList.action?type=${type}&orderNo='+orderNo+'&datemin='+datemin+'&datemax='+datemax;	
}
</script>
</body>
</html>